import { DEFAULT_NAME } from '@/constants';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Outlet, useLocation, useModel } from '@umijs/max';
import { Button, Layout, Menu, theme } from 'antd';
import { useState } from 'react';
import RightContent from './components/RightContent';
import TabsView from './components/TabsView';
const { Header, Sider, Content } = Layout;
const BasicLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const location = useLocation();
  const { routes } = useModel('global', (model) => {
    return {
      routes: model.routes,
    };
  });
  console.log(routes);
  
  //   const matches = matchRoutes(location);
  //   console.log(matches);

  return (
    <Layout className="h-full">
      <Sider
        trigger={null}
        collapsible
        collapsedWidth={50}
        collapsed={collapsed}
      >
        <div className=" text-white font-bold text-base py-3 pl-2 flex items-center indent-2">
          <img
            className=" size-8"
            src="https://gw.alipayobjects.com/zos/bmw-prod/598d14af-4f1c-497d-b579-5ac42cd4dd1f/k7bjua9c_w132_h130.png"
            alt=""
          />
          {!collapsed && <div className=" text-overflow">{DEFAULT_NAME}</div>}
        </div>
        <Menu theme="dark" mode="inline" items={[]} />
      </Sider>
      <Layout>
        <Header
          className=" h-12 flex items-center justify-between box-border border-b"
          style={{ padding: 0, background: colorBgContainer }}
        >
          <div className="flex items-center">
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              className=" ml-2"
              style={{
                fontSize: '16px',
              }}
            />
          </div>
          <RightContent></RightContent>
        </Header>
        <TabsView></TabsView>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  );
};
export default BasicLayout;
